import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Card, theme } from 'antd';
import React from 'react';
import InterfaceCharts from "@/components/interfaceCharts/InterfaceCharts";
import {StatisticCard} from "@ant-design/pro-card";
import {EllipsisOutlined} from "@ant-design/icons";
/**
 * 每个单独的卡片，为了复用样式抽成了组件
 * @param param0
 * @returns
 */
const InfoCard: React.FC<{
  title: string;
  index: number;
  desc: string;
  href: string;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
}> = ({ title, href, index, desc }) => {
  const { useToken } = theme;

  const { token } = useToken();

  return (
    <div
      style={{
        backgroundColor: token.colorBgContainer,
        boxShadow: token.boxShadow,
        borderRadius: '8px',
        fontSize: '14px',
        color: token.colorTextSecondary,
        lineHeight: '22px',
        padding: '16px 19px',
        minWidth: '220px',
        flex: 1,
      }}
    >
      <div
        style={{
          display: 'flex',
          gap: '4px',
          alignItems: 'center',
        }}
      >
        <div
          style={{
            width: 48,
            height: 48,
            lineHeight: '22px',
            backgroundSize: '100%',
            textAlign: 'center',
            padding: '8px 16px 16px 12px',
            color: '#FFF',
            fontWeight: 'bold',
            backgroundImage:
              "url('https://gw.alipayobjects.com/zos/bmw-prod/daaf8d50-8e6d-4251-905d-676a24ddfa12.svg')",
          }}
        >
          {index}
        </div>
        <div
          style={{
            fontSize: '16px',
            color: token.colorText,
            paddingBottom: 8,
          }}
        >
          {title}
        </div>
      </div>
      <div
        style={{
          fontSize: '14px',
          color: token.colorTextSecondary,
          textAlign: 'justify',
          lineHeight: '22px',
          marginBottom: 8,
        }}
      >
        {desc}
      </div>
      {/*<a href={href} target="_blank" rel="noreferrer">*/}
      {/*  了解更多 {'>'}*/}
      {/*</a>*/}
    </div>
  );
};

const Welcome: React.FC = () => {
  const { token } = theme.useToken();
  const { initialState } = useModel('@@initialState');

  return (
    <PageContainer
    >
      <Card
        style={{
          borderRadius: 8,
        }}
        bodyStyle={{
          backgroundImage:
            initialState?.settings?.navTheme === 'realDark'
              ? 'background-image: linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)'
              : 'background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)',
        }}
      >
        <div
          style={{
            backgroundPosition: '100% -30%',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '274px auto',
            backgroundImage:
              "url('https://gw.alipayobjects.com/mdn/rms_a9745b/afts/img/A*BuFmQqsB2iAAAAAAAAAAAAAAARQnAQ')",
          }}
        >
          <div
            style={{
              fontSize: '20px',
              fontWeight: 700,
              color: token.colorTextHeading,
            }}
          >
            欢迎使用无尽Api接口开放平台 🎉
          </div>
          <div
            style={{
              fontSize: '14px',
              color: token.colorTextSecondary,
              lineHeight: '22px',
              marginTop: 16,
              marginBottom: 32,
              width: '65%',
            }}
          >
            <p> 😀 作为用户您可以通过注册登录账户，获取接口调用权限，并根据自己的需求浏览和选择适合的接口。</p>
            <p> 🤝 您可以将自己的接口接入到yuanAPI 接口开放平台平台上，并发布给其他用户使用。 您可以管理和各个接口，以便更好地分析和优化接口性能。</p>
            <p>👌 我们还提供了开发者在线文档和技术支持，帮助您快速接入和发布接口。</p>
            <p> 💯 我们的接口经过多次改进及磨练,致力于提供稳定、安全、高效的接口调用服务</p>
            <p> 💥 平台上提供丰富多样的接口供您选择，涵盖了各个领域的功能和服务，满足不同需求。</p>
            <p> 💖 我们的内容还会不断的丰富,敬请期待！</p>
          </div>
          <div
            style={{
              display: 'flex',
              flexWrap: 'wrap',
              gap: 16,
            }}
          >
            <InfoCard
              index={1}
              href="#"
              title="多样化的接口选择"
              desc="❤️平台上提供丰富多样的接口供您选择，涵盖了各个领域的功能和服务，满足不同需求。"
            />
            <InfoCard
              index={2}
              title="在线调试功能"
              href="#"
              desc="🐵 您可以在平台上进行接口在线调试，节省了开发调试的时间和工作量。"
            />
            <InfoCard
              index={3}
              title="添加自己的接口"
              href="#"
              desc="🐱将自己的接口接入到无尽API 接口开放平台平台上，自己进行管理与发布，满足自己的需求。"
            />
            <InfoCard
              index={4}
              title="开发者文档"
              href="#"
              desc="🐸 平台提供了详细的开发者文档和技术支持，帮助开发者快速接入和发布接口，解决遇到的问题和困难。"
            />
          </div>
        </div>
        <StatisticCard
          title="接口调用情况"
          style={{
            marginTop:100,
          }}
          extra={<EllipsisOutlined />}
          chart={
            <InterfaceCharts></InterfaceCharts>
          }
        />
      </Card>

    </PageContainer>
  );
};

export default Welcome;
